
<template>
  <div style="display: flex; justify-content: center">
    <a-input style="display: block; width: 100%" placeholder="输入内容以评论" :allow-clear="false"
             v-model="inputComment" @pressEnter="submitComment"/>
    <a-button type="primary" @click="submitComment">评论</a-button>
  </div>
  <a-comment
      :content="comment.content"
      :datetime="comment.createTime"
      v-for="comment in props.data"
      :key="comment.id"
  >
    <template #author>
      <a-typography-text style="margin-right: 5px">{{comment.userName}}</a-typography-text>
      <a-tag v-if="comment.userId === props.authorId" color="red">楼主</a-tag>
    </template>
    <template #actions>
      <div style="display: flex; align-items: center; justify-content: start">
                  <span class="action-item" @click="clickCommentThumb(comment)">
                    <IconThumbUp :class="comment.hasThumb ? 'icon-filled' : 'icon'" :size="iconSize"/>
                    <a-typography-text class="icon-text">{{ comment.thumbNum }}</a-typography-text>
                  </span>
        <span class="action-item" @click="toggleReplyInput(comment.id)">
                    <IconMessage class="icon"/>
                    <a-typography-text class="icon-text">回复</a-typography-text>
                  </span>
      </div>
    </template>
    <template #avatar>
      <a-avatar
          :image-url="comment.userAvatar!=null?comment.userAvatar:'https://stone-answer-bucket-1328818493.cos.ap-chengdu.myqcloud.com/user_avatar/default_avatar.png'"
          @click="router.push('/otherProfile/'+comment.user.id)"
      />
    </template>
    <!--是否展示子评论-->
    <a-comment
        :content="reply.toUserId ? `回复 > ${reply.toUserName}：${reply.content}` : reply.content"
        :datetime="reply.createTime"
        v-for="reply in comment.replies"
        :key="reply.id"
    >
      <template #author>
        <a-typography-text style="margin-right: 5px">{{reply.userName}}</a-typography-text>
        <a-tag v-if="reply.userId === props.authorId" color="red">楼主</a-tag>
      </template>
      <template #actions>
        <div style="display: flex; align-items: center; justify-content: start">
                  <span class="action-item" @click="clickCommentThumb(reply)">
                    <IconThumbUp :class="reply.hasThumb ? 'icon-filled' : 'icon'" :size="iconSize"/>
                    <a-typography-text class="icon-text">{{ reply.thumbNum }}</a-typography-text>
                  </span>
          <span class="action-item" @click="toggleReplyInput(reply.id)">
                    <IconMessage class="icon"/>
                    <a-typography-text class="icon-text">回复</a-typography-text>
                  </span>
        </div>
      </template>
      <template #avatar>
        <a-avatar
            :image-url="reply.userAvatar!=null?reply.userAvatar:'https://stone-answer-bucket-1328818493.cos.ap-chengdu.myqcloud.com/user_avatar/default_avatar.png'"
            @click="router.push('/otherProfile/'+reply.userId)"
        />
      </template>
      <!-- 点击回复按钮后展示回复输入框 -->
      <a-comment
          v-if="showReplyInput[reply.id]"
          align="right"
          :avatar="loginUserStore.loginUser.userAvatar"
      >
        <template #actions>
          <a-button type="secondary" @click="toggleReplyInput(reply.id)">取消</a-button>
          <a-button type="primary" @click="submitComment(reply.userId , comment.id)">回复</a-button>
        </template>
        <template #content>
          <a-input placeholder="输入内容以回复" v-model="replyComment"
                   @pressEnter="submitComment(reply.userId , comment.id)"/>
        </template>
      </a-comment>
    </a-comment>
    <!-- 点击回复按钮后展示回复输入框 -->
    <a-comment
        v-if="showReplyInput[comment.id]"
        align="right"
        :avatar="loginUserStore.loginUser.userAvatar"
    >
      <template #actions>
        <a-button type="secondary" @click="toggleReplyInput(comment.id)">取消</a-button>
        <a-button type="primary" @click="submitComment(null, comment.id)">回复</a-button>
      </template>
      <template #content>
        <a-input placeholder="输入内容以回复" v-model="replyComment"
                 @pressEnter="submitComment(null, comment.id)"/>
      </template>
    </a-comment>
  </a-comment>
</template>

<script setup>

import router from "@/router/router";
import {IconMessage, IconThumbUp} from "@arco-design/web-vue/es/icon";
import {defineProps, ref, watch , defineEmits} from 'vue';
import {addPostCommentUsingPost, thumbComment} from "@/api/PostRequest";
import {useLoginUserStore} from "@/store/userStore";

const props = defineProps(['data' , 'authorId' , 'postId']);

const emit = defineEmits(['getData']);

const showReplyInput = ref({});

const loginUserStore = useLoginUserStore();

const iconSize = ref(18);

const replyComment = ref("");

const inputComment = ref("");

watch(()=>props.data , (newData)=>{
  newData.forEach((comment) => {
    showReplyInput.value[comment.id] = false;
    if(comment.replies){
      comment.replies.forEach((reply) => {
        showReplyInput.value[reply.id] = false;
      })
    }
  });
})

async function clickCommentThumb(comment){
  comment.hasThumb = !comment.hasThumb;
  // 从后端获取点赞数
  const result = await thumbComment(comment.id);
  if(result.data.code === 0) {
    comment.thumbNum += result.data.data;
  }
}

// 切换回复输入框的显示状态
function toggleReplyInput(commentId) {
  showReplyInput.value[commentId] = !showReplyInput.value[commentId];
}

// 提交用户输入的评论
async function submitComment(userId , parentId) {
  // 如果传入了 userId，则表示是回复某人的评论
  if (userId > 0) {
    await addPostCommentUsingPost({
      itemId: props.postId,
      content: replyComment.value,
      toUserId: userId,
      parentId: parentId
    });
    replyComment.value = "";
  } else if(parentId > 0) {
    await addPostCommentUsingPost({
      itemId: props.postId,
      content: replyComment.value,
      parentId: parentId
    });
    replyComment.value = "";
  }else{
    await addPostCommentUsingPost({
      itemId: props.postId,
      content: inputComment.value,
    });
    inputComment.value = "";
  }
  await emit('getData');
}
</script>

<style scoped>
.action-item {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 8px; /* 图标和文字间距 */
  margin-right: 40px;
  cursor: pointer;
}

/* 图标的文字样式 */
.icon-text {
  font-size: 14px; /* 文字大小 */
  line-height: 1; /* 避免文字高度影响布局 */
}

.icon, .icon-filled {
  border-radius: 50%;
  transition: all 0.1s;
}

.icon-filled {
  color: #1890ff !important;
  fill: currentColor !important;
}

/* 图标样式 */
.icon:hover {
  background-color: rgb(var(--gray-2));
}
</style>